<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="风险评估结果" left-arrow @click-left="$router.go(-1)" />
    <!-- 背景盒子 -->
    <div class="bgbox">
      <!-- 身体活动评估标题 -->
      <div class="bodytitle">
        <h3>身体活动评估</h3>
      </div>
      <!-- 评估结果 -->
      <div class="resultbox">
        <div class="result">评估结果</div>
        <div class="resultword">
          您的<span>身体活动不足</span>,请注意以下事项。
        </div>
      </div>
      <!-- 健康处方 -->
      <div class="prescription">
        <!-- 处方标题 -->
        <div class="pre_title">
          <img src="/images/圆五角星.png" alt="" />
          <div>健康处方</div>
        </div>
        <!-- 处方内容 -->
        <div class="pre_text">
          1.运动对于改善身体健康状况，特别是预防慢性病的发生发展具有重要的作用，因此最好每天运动，或每周3-5次。<br />
          2.年轻、身体条件较好的可以选择中高强度运动，如骑车、跑步、游泳、打球等，年老、身体条件较差者可以选择低强度运动，如步行、太极拳等。<br />
          3.每次运动时间可以由10分钟开始，逐步延长至30-40分钟。<br />
          4.量力而行，持之以恒，不要松懈。
        </div>
      </div>
      <button @click="change">返回首页</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    change() {
      this.$router.push('/home')
    }
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1074ff;

  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}

.bgbox {
  width: 100vw;
  height: 100vw;
  background-color: #f8f8f8;

  .bodytitle {
    width: 95vw;
    margin: auto;
    background-color: #fff;
    .time {
      font-size: 200;
      color: #acacac;
      margin: 2vw 4vw;
    }
    .bodyactivity {
      font-size: 400;
      font-weight: 400;
      margin-left: 4vw;
      padding-bottom: 2vw;
    }
  }
  .resultbox {
    text-align: center;
    .result {
      font-size: 6vw;
      font-weight: 600;
      margin: 4vw;
    }
    .resultword {
      color: #676767;
      span {
        color: #f0928f;
      }
    }
  }
  .prescription {
    width: 95vw;
    margin: auto;
    margin-top: 10vw;
    background-color: #fff;
    .pre_title {
      display: flex;
      padding: 4vw;
      img {
        width: 5vw;
        margin-right: 1vw;
      }
    }
    .pre_text {
      color: #676767;
      margin: 0 5vw;
    }
  }
  button {
    display: block;
    margin: 10vw auto;
    color: #fff;
    border: none;
    width: 70vw;
    height: 12vw;
    border-radius: 15px;
    background-color: #1074ff;
  }
}
</style>